<template>
	<z-box>
		<z-title name="自定义多边形 custom & shape"></z-title>
		<z-chart :option="option" style="width: 100%; height: 400px; margin-top: 10px;"></z-chart>
	</z-box>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      option: {}
    }
  },
  mounted () {
    const dpetNames = ['市场部', '财务部', '产品部', '研发部', '大数据部', '生产部', '人事部', '化学部', '科学院', '证券部']
    const points = [12, 23, 22, 1, 14, 32, 23, 24, 26]
    this.setOption(dpetNames, points, 0.4)
  },
  methods: {
    setOption (xAxisData, serieData, scale) {
      // const scale = 0.4;
			const c5 = 5 * scale;
			const c6 = 6 * scale;
			const c13 = 13 * scale;
			const c15 = 15 * scale;
			const c17 = 17 * scale;
			const c20 = 20 * scale;
			const c23 = 23 * scale;
			const c35 = 35 * scale;
			const distance = 0 * scale;

      // 绘制左侧面
			const CubeLeft = echarts.graphic.extendShape({
			  shape: { x: 0, y: 0 },
			  buildPath: function(ctx, shape) {
			    const xAxisPoint = shape.xAxisPoint;
			    const c0 = [shape.x + c17, shape.y]
			    const c1 = [shape.x - c23, shape.y - c6]
			    const c2 = [xAxisPoint[0] - c23, xAxisPoint[1] - c13]
			    const c3 = [xAxisPoint[0] + c17, xAxisPoint[1]]
			    ctx.moveTo(c0[0], c0[1])
			      .lineTo(c1[0], c1[1])
			      .lineTo(c2[0], c2[1])
			      .lineTo(c3[0], c3[1])
			      .closePath();
			  }
			});
			// 绘制右侧面
			const CubeRight = echarts.graphic.extendShape({
			  shape: { x: 0, y: 0 },
			  buildPath: function(ctx, shape) {
			    const xAxisPoint = shape.xAxisPoint;
			    const c1 = [shape.x + c17, shape.y]
			    const c2 = [xAxisPoint[0] + c17, xAxisPoint[1]]
			    const c3 = [xAxisPoint[0] + c35, xAxisPoint[1] - c15]
			    const c4 = [shape.x + c35, shape.y - c15]
			    ctx .moveTo(c1[0], c1[1])
			      .lineTo(c2[0], c2[1])
			      .lineTo(c3[0], c3[1])
			      .lineTo(c4[0], c4[1])
			      .closePath();
			  }
			});
			// 绘制顶面
			const CubeTop = echarts.graphic.extendShape({
			  shape: { x: 0, y: 0 },
			  buildPath: function(ctx, shape) {
			    const c1 = [shape.x + c17, shape.y]
			    const c2 = [shape.x + c35, shape.y - c15] //右点
			    const c3 = [shape.x - c5, shape.y - c20]
			    const c4 = [shape.x - c23, shape.y - c6]
			    ctx.moveTo(c1[0], c1[1])
			      .lineTo(c2[0], c2[1])
			      .lineTo(c3[0], c3[1])
			      .lineTo(c4[0], c4[1])
			      .closePath();
			  }
			});
			// 注册三个面图形
			echarts.graphic.registerShape('DwCubeLeft', CubeLeft);
			echarts.graphic.registerShape('DwCubeRight', CubeRight);
			echarts.graphic.registerShape('DwCubeTop', CubeTop);

      this.option = {
        backgroundColor: '#0E233E',
			  tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      type: 'shadow'
			    },
			  },
			  grid: {
			    left: '4%',
			    right: '5%',
			    top: '15%',
			    bottom: '14%',
			    containLabel: true
			  },
			  xAxis: {
			    type: 'category',
			    data: xAxisData,
			    axisLine: {
			      show: true,
			      lineStyle: {
			        color: 'rgba(101, 198, 231, 0.2)'
			      }
			    },
			    axisTick: {
			      show: true,
			      color: 'rgba(101, 198, 231, 1)'
			    },
			    axisLabel: {
			      margin: 12,
			      fontSize: 12,
			      color: 'rgba(101, 198, 231, 1)'
			    }
			  },
			  yAxis: [
			    {
			      type: 'value',
			      name: '分数',
			      nameTextStyle: {
			        color: 'rgba(101, 198, 231, 1)'
			      },
			      min: 0,
			      axisLine: {
			        show: false
			      },
			      axisTick: {
			        show: false
			      },
			      axisLabel: {
			        fontSize: 12,
			        color: 'rgba(101, 198, 231, 1)'
			      },
			      splitLine: {
			        show: true,
			        lineStyle: {
			          color: 'rgba(101, 198, 231, 0.2)'
			        }
			      },
			      splitNumber: 4
			    }
			  ],
			  series: [
			    {
			      type: 'custom',
			      name: '得分',
						animationDuration: 3000,
						animationEasing: 'cubicInOut',
			      renderItem: (params, api) => {
			        const location = api.coord([api.value(0), api.value(1)]);
			        location[0] -= distance;
			        const xAxisPoint = api.coord([api.value(0), 0]);
			        xAxisPoint[0] -= distance;
			        return {
			          type: 'group',
			          children: [
			            {
			              type: 'DwCubeLeft',
			              shape: {
			                api,
			                xValue: api.value(0),
			                yValue: api.value(1),
			                x: location[0],
			                y: location[1],
			                xAxisPoint: xAxisPoint
			              },
			              style: {
			                fill: new echarts.graphic.LinearGradient(
			                  0, 0, 0, 1,
			                  [
			                    { offset: 0, color: '#C2F631' },
			                    { offset: 1, color: '#08D3F7' }
			                  ]
			                )
			              }
			            },
			            {
			              type: 'DwCubeRight',
			              shape: {
			                api,
			                xValue: api.value(0),
			                yValue: api.value(1),
			                x: location[0],
			                y: location[1],
			                xAxisPoint: xAxisPoint
			              },
			              style: {
			                fill: new echarts.graphic.LinearGradient(
			                  0, 0, 0, 1,
			                  [
			                    { offset: 0, color: '#A1D60D' },
			                    { offset: 1, color: '#09C2E3' }
			                  ]
			                )
			              }
			            },
			            {
			              type: 'DwCubeTop',
			              shape: {
			                api,
			                xValue: api.value(0),
			                yValue: api.value(1),
			                x: location[0],
			                y: location[1],
			                xAxisPoint: xAxisPoint
			              },
			              style: {
			                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			                  { offset: 0, color: '#B1F244' },
			                  { offset: 1, color: '#8EEC69' }
			                ])
			              }
			            }
			          ]
			        };
			      },
			      itemStyle: {
			        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			          { offset: 0, color: '#1C9CFE' },
			          { offset: 1, color: '#004A82' }
			        ])
			      },
			      data: serieData
			    }
        ]
			};
    }
  }
}
</script>

<style>

</style>